<template>
	<view>
    <form @submit='saveUser'>
		<view class="line">
			<view class="left">头像</view>
			<view class="right">
      <button open-type="chooseAvatar" class="btnAvatar" @chooseavatar="chooseavatar" >
          <image  class="avatar" :src="formData.avatar"></image>
      </button> 
				<view class="arrow"></view>
			</view>
		</view>
		<view class="line">
			<view class="left">昵称</view>
			<view class="right">
			     <input type="nickname"  name='nickname' :value="formData.nickname" />
				<view class="arrow"></view>
			</view>
		</view>
		<view class="line">
			<view class="left">真实姓名</view>
			<view class="right">
		          <input type="text" name='name' :value="formData.name" />
				<view class="arrow"></view>
			</view>
		</view>
		<view class="line">
			<view class="left">手机号码</view>
			<view class="right">
	     <input type="text" name='mobile' :value="formData.mobile"/>
				<view class="arrow"></view>
			</view>
		</view>
		<view class="btnLogin">
			<button type="primary" form-type='submit'>立即保存</button>
		</view>
    </form>
	</view>
</template>

<script>
  export default {
    data() {
      return {
        formData:{}
      }
    },
    onLoad(){
      this.initData()
    },
    methods:{
      //保存

       async  saveUser(event){
          // console.log("111",event)
          const  res = await uni.$http.post('/user/update',{
            ...event.detail.value,//获取表单的数据
            avatar:this.formData.avatar//头像加入
          })
          this.$store.commit('user/setUserInfo',res)
          uni.showToast({
            title:'更新成功',
            icon:'none'
          })
        },
    async  initData(){
        const res = await uni.$http.get('/user/profile')
        this.formData=res
      },
      // 微信获取头像回调
      chooseavatar(event){
          // 1.获取头像的临时图片路径为止
        console.log(event.detail.avatarUrl)
        //2. TODO: 将这个临时路径的图片上传到自己的服务器保存起来，返回自己服务器的保存地址  【保存自己的服务器，永久存在】
            // 没有办法做的，这个项目后端没有提供上传接口。
            // uni.uploadFile() 实现将临时路径的图片资源上传到自己的服务器
            // uniApp中通过uni.uploadFile()来实现上传文件的！
            			/*
        				wx.uploadFile({
        				  url: 'https://example.weixin.qq.com/upload', //仅为示例，非真实的接口地址
        				  filePath: event.detail.avatarUrl , // 临时路径
        				  name: 'file',
        				  formData: {
        					'user': 'test'
        				  },
        				  success (res){
        					// 获取到真实的存储在我们后端服务器上面的地址
        					const data = res.data
        				  }
        				})
        				*/
            // 3. 将头像地址存储到formData里面去
            this.formData.avatar = event.detail.avatarUrl  // 真实工作里面，应该75行回调那里的真实服务器地址。
      }
    }
  }
</script>

<style lang="scss">
.line{
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	line-height: 88rpx;
	padding: 0 30rpx;
	align-items: center;
	.right{
		height: 80rpx;
		display: flex;
		align-items: center;
	}
	.arrow{
		border-top: 1px solid #aaa;
		border-right: 1px solid #aaa;
		width: 20rpx;
		height: 20rpx;
		transform: rotateZ(45deg);
	}
	input{
		text-align: right;
		width: 240rpx;
	}
}
.avatar{
	width: 80rpx;
	height: 80rpx;
	border-radius: 50%;
}
.btnAvatar{
	background-color: #fff;
	width: 100%;
	display: block;
	padding: 0;
	height: 80rpx;
	border: none;
	border-radius: 0;
}
.btnLogin{
	margin:40rpx;
}
</style>
